<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>菜单管理</span></div>
            <div>
              
            </div>
        </div>
        <div class="message">
            <p class="character">1.可以查看当前登录系统的用户、地址等数据</p>
            <p class="character">2.可以给在线用户发送消息，通告等等；可以在系统维护或者临时紧急发布版本时，将在线用户强制下线。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="roleTree">
            <div class="roleTreeLeft">
                <div class="roleContent">  
                 <Tree :menuList="menuList"></Tree>
                </div>
            </div>
            <div class="roleTreeRight">
                <div class="example"><span>示例</span></div>
                <div class="roleContent">  
                 <!-- <examTree></examTree> -->
                </div>
            </div>  
        </div>
        
    </div>
</template>

<script>
import Tree from './components/menuTree'
import {getMenu} from '@/api/user'
// import examTree from './components/roleExampleTree'
export default {
    name:'role',
    data(){
        return{
            menuList:[]
        }
    },
    components:{
        Tree,
        // examTree
    },
    created(){
        getMenu().then((res)=>{
            this.menuList=res.Result
        })
    }
}
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:100px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.roleTree{
    width:99%;
    margin: 0 auto;
    display: flex;
    .roleTreeLeft{  
        flex: 1;
        .roleContent{
            margin: 70px 0 0 150px;
            width: 420px;
            height: 600px;
            overflow-x: hidden;
        }
    }
    .roleTreeRight{
        flex: 1;
        height: 720px;
        border-left: 1px solid #999999;
        .example{
            margin: 10px 0 0 20px;
        }
        .roleContent{
            margin: 45px 0 0 150px;
            width: 350px;
        }
    }
}
</style>
